<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="1"></el-col>
        <el-col :span="2">
          <el-button type="success"  @click="handleAdd" >新建项目集</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary"  @click="ProjectListSearch" >查询</el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-tabs v-model="pageDate.param.status"  type="border-card" @tab-change="handleTabs" tabPosition="left">
        <el-tab-pane label="全部" name="" />
        <el-tab-pane label="未开始" name="wait"/>
        <el-tab-pane label="进行中" name="doing"/>
        <el-tab-pane label="已关闭" name="closed"/>

  <el-table :data="pageDate.tableData" style="width: 100%">
    <el-table-column label="项目名称" prop="name"  width="300"  align="left"  />
    <el-table-column label="状态" prop="status"  width="80" align="center" >
      <template #default="scope">
        <el-tag
          :type="scope.row.status === 'doing' ? 'success' : scope.row.status === 'wait'? 'info':'warning'"
          disable-transitions
        >{{ scope.row.status  === 'doing' ? '进行中' : scope.row.status === 'wait'? '未开始':'已关闭'}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="负责人" prop="pm" width="140" align="center"  >
      <template #default="scope">
        <el-link @click="handleUser(scope.row.pm)">
          <el-icon class="el-icon--right"><User /></el-icon>{{scope.row.pm}}
        </el-link>
      </template >
    </el-table-column>
    <el-table-column label="币种类型" prop="budgetUnit" width="120" align="center" >
      <template #default="scope">
      <el-select v-model="scope.row.budgetUnit" disabled >
        <el-option label="人民币" value="CNY" />
        <el-option label="美元" value="USD" />
      </el-select>
      </template>
    </el-table-column>
    <el-table-column label="预算" prop="budget" width="180" align="center"/>
    <el-table-column label="计划开始" prop="begin"  width="120" align="center">
      <template #default="scope">
       {{dateFtt("yyyy-MM-dd",scope.row.begin) }}
      </template>
    </el-table-column>
    <el-table-column label="计划结束" prop="end" width="120" align="center" >
      <template #default="scope">
        {{dateFtt("yyyy-MM-dd",scope.row.end) }}
      </template>
    </el-table-column>
    <el-table-column align="right"  label="操作"  >
      <template #default="scope">
        <el-space size="large">
            <div v-if="scope.row.status=='wait'">
              <el-button size="small" type="success" :icon="VideoPlay" circle @click="handleRun(scope.row)" />
            </div>
          <div v-if="scope.row.status=='doing'">
            <el-button size="small" type="primary" :icon="SwitchButton" circle @click="handleRun(scope.row)" />
          </div>
          <div v-if="scope.row.status=='closed'">
            <el-button size="small" type="warning" :icon="CloseBold" circle disabled @click="handleRun(scope.row)" />
          </div>
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
            >编辑项目</el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
        </el-space>

      </template>

    </el-table-column>

  </el-table>
      </el-tabs>
    </el-main>
  <el-footer height="80px" >
  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :page-sizes="[5, 10, 50]"
    :small="small"
    :background="background"
    layout="total,sizes, prev, pager, next"
    :total="pageTotal"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  </el-footer>

  </el-container>

    <ProjectInfoDialog   :infoDialogData="formData.form"    v-model:infoDialog=recordDialogVisible  @renovate="ProjectListSearch"> </ProjectInfoDialog>

    <RunDialog    :runDialogData="runData.form"   v-model:runDialog="runDialogVisible"   @renovate="ProjectListSearch" ></RunDialog>

    <UserInfoDialog  :account="accountName"  v-model:userDialog="userDialogVisible"  />


</template>

<script setup>

  import {dateFtt} from '@/utils/dateTime.js';
  import RunDialog from 'views/project/comp/RunDialog.vue';
  import ProjectInfoDialog from 'views/project/comp/ProjectInfoDialog.vue';
  import UserInfoDialog from 'views/user/comp/UserInfoDialog.vue';

  import { VideoPlay,SwitchButton,CloseBold ,View as IconView,User } from '@element-plus/icons-vue'
  import { computed, ref,onMounted ,reactive ,watch} from 'vue'
  import { ElMessageBox,ElMessage } from 'element-plus';
  import { ProjectList ,ProjectGetById,ProjectSaveOrUpdate ,ProjectDelete} from '@/api/project'





  //列表查询

  const pageTotal=ref(0);

  const pageSize = ref(5);

  const currentPage = ref(1);

  const pageDate=reactive({
    tableData : [],
    param:{
      status:''
    }

  });

  const handleTabs =()=>{
    ProjectListSearch();
  }


  const handleDelete = (index, row) => {

    ElMessageBox.confirm('确定要删除这条数据?')
      .then(() => {
        let param={
          id:row.id
        }
        ProjectDelete(param).then(res =>{
          if(res.code==200) {
            ElMessage.success("数据删除成功!");
            ProjectListSearch();
          }else{
            ElMessage.error(res.message);
          }
        })
      })
      .catch(() => {
      })
  }


  const handleCurrentChange = (current) => {
    currentPage.value=current;
    ProjectListSearch();
  }
  const handleSizeChange = (size) => {
    pageSize.value=size;
    ProjectListSearch();
  }

  const ProjectListSearch= ()=>{
    let param={
      currentPage:currentPage.value,
      pageSize:pageSize.value,
      status:pageDate.param.status
    }

    ProjectList(param).then(res=>{
      pageTotal.value=res.totalResult;
      pageDate.tableData = res.data.records;

    })
  }
  //表单查询
  const recordDialogVisible=ref(false);

  const formData = reactive({
    form:{}
  })


  const handleEdit = (index,row) => {
    let param = {};
    param.id = row.id;
    ProjectGetById(param).then(res => {
      formData.form = res.data;
      recordDialogVisible.value = true;
    })
  }
    //新建项目集
    const handleAdd = () => {
      formData.form = {
        model:'scrum',
        parent:0
      };
      recordDialogVisible.value = true;
    }


  /**
   * ----------------------------------------------
   * 修改运行状态方法
   * */
  const runDialogVisible=ref(false);
  const runData = reactive({
    form:{}
  })
  const handleRun = (row) => {
    runDialogVisible.value=true;
    runData.form=row;
  }


  /**
   * ----------------------------------------------
   * 用户查询
   * */
  const userDialogVisible=ref(false);
  const accountName=ref("");
  const handleUser=(account)=>{
    accountName.value=account;
    userDialogVisible.value=true;
  }


  onMounted(()=>{
    ProjectListSearch();
  })

</script>
